<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础表格">
                <el-table
                        :data="tableData"
                        style="width: 80%" :border="true">
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </my-simple-tr>


            <my-simple-tr label="带状态表格">
                <el-table
                        :data="tableData"
                        :row-class-name="tableRowClassName"
                        style="width: 85%" :border="true">
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </my-simple-tr>

            <my-simple-tr label="固定表头">
                <el-table
                        :data="tableData"
                        height="250"
                        :row-class-name="tableRowClassName"
                        style="width: 85%" :border="true">
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </my-simple-tr>

            <my-simple-tr label="固定列[最大高度]">
                <el-table
                        :data="tableData"
                        border
                        style="width: 70%"
                        max-height="250">
                    <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </my-simple-tr>

            <my-simple-tr label="多选">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 80%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </my-simple-tr>

            <my-simple-tr label="排序">
                <el-table
                        :data="tableData"
                        style="width: 80%"
                        :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column
                            prop="date"
                            label="日期"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            sortable
                            :formatter="formatter">
                    </el-table-column>
                </el-table>
            </my-simple-tr>

            <my-simple-tr label="筛选">
                <el-button @click="resetDateFilter">清除日期过滤器</el-button>
                <el-button @click="clearFilter">清除所有过滤器</el-button>
                <el-table
                        ref="filterTable"
                        :data="tableData"
                        style="width: 80%"
                        :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column
                            prop="date"
                            label="日期"
                            sortable
                            width="180"
                            column-key="date"
                            :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                            :filter-method="filterHandler"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            sortable
                            :formatter="formatter">
                    </el-table-column>
                    <el-table-column
                            prop="tag"
                            label="标签"
                            width="150"
                            :filters="[{text:'家',valule:'家'},{text:'公司',valule:'公司'}]"
                            :filter-method="filterTag"
                            filter-placement="bottom-end"
                    >
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.tag === '家' ? 'primary' : 'success'"
                                    disable-transitions>{{scope.row.tag}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </my-simple-tr>

            <my-simple-tr label="自定义列模板">
                <el-table
                        ref="filterTable"
                        :data="tableData"
                        style="width: 80%"
                        :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column
                            label="日期"
                            width="180"
                            prop="date">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{scope.row.date}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="姓名"
                            width="180">
                        <template slot-scope="scope">
                            <el-popover trigger="hover">
                                <p> 姓名:{{scope.row.name}}</p>
                                <p> 姓名:{{scope.row.name}}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{scope.row.name}}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            >
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
                            <el-button @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </my-simple-tr>

            <my-simple-tr label="展开行">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="商品名称">
                                    <span>{{ props.row.name }}</span>
                                </el-form-item>
                                <el-form-item label="店铺地址">
                                    <span>{{ props.row.address }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="180">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </my-simple-tr>




        </my-simple-table>
    </div>
</template>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    tag: '家'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333,
                    tag: '公司'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333,
                    tag: '家'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333,
                    tag: '家'
                }],
                multipleSelection: []
            }
        },
        methods :{
            tableRowClassName({row,rowIndex}){
                if (rowIndex === 1) {
                    return 'warning-row';
                }else if (rowIndex === 3) {
                    return 'success-row';
                }
                return ''
            },
            toggleSelection(rows){
                if(rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    })
                }else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            resetDateFilter(){
                this.$refs.filterTable.clearFilter('date');
            },
            clearFilter(){
                this.$refs.filterTable.clearFilter();
            },
            filterHandler(value, row, column){
                const property = column['property'];
                return row[property] === value;
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    }
</script>

